﻿@{
    ViewData["Title"] = "养宠知识";
}
@section Style {
      <style>
        .petKnowledgeDiv a {
            text-decoration: none;
            color: black;
            font-size: 15px;
        }

        .petKnowledgeDiv a:hover {
            text-decoration: underline;
                color: RoyalBlue;
        }

        .el-select .el-input {
            width: 72px;
        }

        .el-input {
            width: 280px;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

        #tab-first, #tab-second, #tab-third {
            width:140px;
            font-weight:bold;
            font-size:15px;
        }

        .el-tabs__header{
            margin-bottom:0px !important;
        }
    </style>
}
<div style="width:1020px;margin:auto;" class="petKnowledgeDiv">
    <div style="margin-top:9px;height:100px;">
        <a href='@ViewData["bannerAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["bannerAdvertID"])"><img src='@ViewData["bannerAdvertImg"]' style="width:1020px; height:100px;" /></a>
    </div>
    <div style="margin-top:20px;">
        <div style="font-size:20px;font-weight:bold;text-align:left;"><span style="color:black;margin-right:4px;">TOP</span><span>10</span></div>
        <div><hr style="background-color:black;height:1px; border:none;" /></div>
        <div style="margin-top:9px;height:300px;background-color:#f8f8f8;">
            <div style="width:600px;float: left; ">
                <template>
                    <el-carousel :interval="3000" arrow="always">
                        <el-carousel-item v-for="item in mostReadKnowledgeCarousel">
                            <a :href="item.navurl" target="_blank" :title="item.title"><img :src='item.src' style="width:600px; height:300px;" alt="图片不存在" /></a>
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </div>
            <div style="float: left;">
                <div style="color:red;line-height:30px;margin-top:10px;font-size:18px;text-align:left;padding-left:20px;font-weight:bold;font-style:italic;">Others</div>
                <div><hr style="background-color:lightgray;height:1px; border:none;" /></div>
                <div class="recoDiv" v-for="item in mostReadKnowledges">
                    <div style="text-align:left;margin-left:26px;margin-top:12px;;font-size:17px;"><a :href="item.navurl" target="_blank" style="word-wrap:break-word;">{{item.title}}</a></div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top:30px;">
        <div>
            <div style="float: left;font-size:20px;font-weight:bold;">
                <span>知识集</span>
                </div>
            <div style="text-align: right;">
                <el-input placeholder="请输入搜索内容" v-model.trim="searchInput" class="input-with-select" size="mini">
                    <el-button slot="append" icon="el-icon-search" @@click="searchHandle"></el-button>
                </el-input>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div id="splitLineForPetStoryList" style="background-color:black;height:1px;margin-top:8px;"></div>
    </div>
    <div style="margin-top:20px;">
        <div style="width:700px;float:left;">
            <template>
                <el-tabs v-model="activeName" @@tab-click="handleClick">
                    <el-tab-pane label="全部" name="first">
                        <div id="petKnowledgeListDivAll" style="width:700px;float:left;margin-bottom:20px;"></div>
                        <div style="margin-top:20px;height:30px;width:700px;background-color:#f5f5f5;justify-content: center;display:flex;">
                            <a id="addMoreFirst" @@click.prevent="appendPetKnowledgeHandle(0,null)" href="#" style="color:red;margin:auto;">加载更多</a>
                            <span id="toTheEndFirst" style="color:gray;display:none;margin:auto;">已经到底了~</span>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="犬类" name="second">
                        <div id="petKnowledgeListDivDog" style="width:700px;float:left;margin-bottom:20px;"></div>
                        <div style="margin-top:20px;height:30px;width:700px;background-color:#f5f5f5;justify-content: center;display:flex;">
                            <a id="addMoreSecond" @@click.prevent="appendPetKnowledgeHandle(2,null)" href="#" style="color:red;margin:auto;">加载更多</a>
                            <span id="toTheEndSecond" style="color:gray;display:none;margin:auto;">已经到底了~</span>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="猫咪" name="third">
                        <div id="petKnowledgeListDivCat" style="width:700px;float:left;margin-bottom:20px;"></div>
                        <div style="margin-top:20px;height:30px;width:700px;background-color:#f5f5f5;justify-content: center;display:flex;">
                            <a id="addMoreThird" @@click.prevent="appendPetKnowledgeHandle(1,null)" href="#" style="color:red;margin:auto;">加载更多</a>
                            <span id="toTheEndThird" style="color:gray;display:none;margin:auto;">已经到底了~</span>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <div id="hideDiv" style="display:none;">隐藏div</div>
        </div>
        <div id="advertDiv" style="height:258px;width:320px;background-color:silver;float:left;">
            <div style="background-color:#f5f5f5;color:gray;font-size:13px;">广告</div>
            <a href='@ViewData["blockAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["blockAdvertID"])"><img src='@ViewData["blockAdvertImg"]' style="width:320px; height:240px;" /></a>
        </div>
        <div style="clear:both;"></div>
   </div>
</div>
@section Scripts {
    <script type="text/javascript">
        $("#petKnowledge").css("color", "red");

        $(document).scroll(function () {
            var recTop = $("#splitLineForPetStoryList").offset().top;
            var scroH = $(document).scrollTop();//滚动高度
            if (scroH > recTop) {
                $('#advertDiv').css({
                    'position': 'fixed',
                    'top': '60px',
                    'margin-left': '700px'
                });
            }
            else {
                $('#advertDiv').css({
                    'position': '',
                    'top': '',
                    'margin-left': ''
                });
            }
        });

        var app = new Vue({
            el: "#app",
            mounted: async function () {
                let that = this;
                await that.appendPetKnowledgeHandle(0, that);

                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                advertClickHandle(val) {
                    axios.post('../Home/AdvertClick', {
                        "advertID": val
                    }).then(response => {
                        console.log(response.data);
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
                //加载故事集
                async appendPetKnowledgeHandle(val, obj) {
                    if (obj === null || obj === undefined)
                        obj = app;

                    let lastPetStoryID = -1;
                    if (val === 0)
                        lastPetStoryID = obj.lastPetStoryIDAll;
                    else if(val === 2)
                        lastPetStoryID = obj.lastPetStoryIDDog;
                    else
                        lastPetStoryID = obj.lastPetStoryIDCat;

                    await axios.post('../Home/PetKnowledge_Partial', {
                        "searchContent": this.searchInput,
                         "lastPetStoryID": lastPetStoryID,
                        "eliminatedIDs": obj.eliminatedIDs,
                        "knowledgeType":val,
                    }).then(response => {
                        $("#hideDiv").append(response.data);
                        var batchDivHeight = parseInt($("#hideDiv #batchDiv").attr("tag"));
                        var batchDataCount = parseInt($("#hideDiv #batchDiv").attr("datacount"));

                        if (batchDivHeight > 0) {
                            if (val === 0) {
                                $("#petKnowledgeListDivAll").height($("#petKnowledgeListDivAll").height() + batchDivHeight);
                                $("#petKnowledgeListDivAll").append(response.data);
                                obj.lastPetStoryIDAll = parseInt($("#hideDiv #batchDiv").attr("lastid"));
                            }
                            else if (val === 2) {
                                $("#petKnowledgeListDivDog").height($("#petKnowledgeListDivDog").height() + batchDivHeight);
                                $("#petKnowledgeListDivDog").append(response.data);
                                obj.lastPetStoryIDDog = parseInt($("#hideDiv #batchDiv").attr("lastid"));
                            }
                            else {
                                $("#petKnowledgeListDivCat").height($("#petKnowledgeListDivCat").height() + batchDivHeight);
                                $("#petKnowledgeListDivCat").append(response.data);
                                obj.lastPetStoryIDCat = parseInt($("#hideDiv #batchDiv").attr("lastid"));
                            }
                        }

                        if (batchDataCount < obj.perBatchCount) {
                            if (val === 0) {
                                $("#addMoreFirst").hide();
                                $("#toTheEndFirst").show();
                            }
                            else if (val === 2) {
                                $("#addMoreSecond").hide();
                                $("#toTheEndSecond").show();
                            }
                            else {
                                $("#addMoreThird").hide();
                                $("#toTheEndThird").show();
                            }
                        }

                        $("#hideDiv").empty();
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
            //tab控件切换
           async  handleClick(tab, event) {
               if (tab.name == 'first') {
                   if ($("#toTheEndFirst").is(':visible'))
                       return;

                   if ($("#petKnowledgeListDivAll").height() > 40)
                       return;

                    await app.appendPetKnowledgeHandle(0, app);
               }
               else if (tab.name == 'second') {
                    if ($("#toTheEndSecond").is(':visible'))
                        return;

                    if ($("#petKnowledgeListDivDog").height() > 40)
                        return;

                    await app.appendPetKnowledgeHandle(2, app);
               }
               else {
                    if ($("#toTheEndThird").is(':visible'))
                        return;

                    if ($("#petKnowledgeListDivCat").height() > 40)
                        return;

                    await app.appendPetKnowledgeHandle(1, app);
               }
            },
            //重新加载知识集
           async  petKnowledgeListClick() {
                app.activeName = 'first';
                app.lastPetStoryIDAll = -1;
                app.lastPetStoryIDDog = -1;
                app.lastPetStoryIDCat = -1;

                $("#petKnowledgeListDivAll").empty();
                $("#petKnowledgeListDivAll").height(0);
                $("#addMoreFirst").show();
                $("#toTheEndFirst").hide();

                    $("#petKnowledgeListDivDog").empty();
                    $("#petKnowledgeListDivDog").height(0);
                    $("#addMoreSecond").show();
                    $("#toTheEndSecond").hide();

                    $("#petKnowledgeListDivCat").empty();
                    $("#petKnowledgeListDivCat").height(0);
                    $("#addMoreThird").show();
                    $("#toTheEndThird").hide();

                    await app.appendPetKnowledgeHandle(0, app);
            },
            //搜索
                async searchHandle() {
                    if (app.searchInput.length > 20) {
                        this.$message.error('搜索内容不能超过20个字符');
                        return;
                    }

                    await app.petKnowledgeListClick();
                },
        },
            data() {
                return {
                    mostReadKnowledgeCarousel: @Html.Raw(ViewData["mostReadKnowledgeCarousel"]),
                    mostReadKnowledges: @Html.Raw(ViewData["mostReadKnowledges"]),
                    eliminatedIDs: @Html.Raw(ViewData["eliminatedIDs"]),
                    perBatchCount: @Html.Raw(ViewData["perBatchCount"]),
                    activeName: 'first',
                    searchInput: '',
                    lastPetStoryIDAll: -1,
                    lastPetStoryIDDog: -1,
                    lastPetStoryIDCat: -1,
                }
            }
        });
    </script>
}
